<template>
  <div class="property-panel column shadow-2" ref="propertyPanel">
    <q-scroll-area class="col q-ma-xs column">
      <q-card class="col column q-pa-xs no-wrap">
        <q-tabs
          v-model="curTab"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
        >
          <q-tab name="form" label="表单属性" />
        </q-tabs>
        <q-separator />
        <q-tab-panels v-model="curTab" animated>
          <q-tab-panel name="form">
            <q-input
              dense
              outlined
              type="text"
              class="q-my-sm"
              v-model="form.id"
              prefix="节点ID："
              input-class="text-left"
            />
            <q-input
              dense
              outlined
              type="text"
              class="q-my-sm"
              v-model="form.name"
              prefix="节点名称："
              input-class="text-left"
            />
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </q-scroll-area>
  </div>
</template>

<script>
export default {
  name: 'PropertyPanel',
  props: {
    modeler: {
      type: Object,
      required: true,
    },
  },
  computed: {
    userTask() {
      if (!this.element) {
        return false;
      }
      return this.element.type === 'bpmn:UserTask';
    },
    sequenceFlow() {
      if (!this.element) {
        return false;
      }
      return this.element.type === 'bpmn:SequenceFlow';
    },
  },
  data() {
    return {
      curTab: 'form',
      form: {
        id: '',
        name: '',
        color: null,
      },
      element: {},
      users: [
        {
          value: 'zhangsan',
          label: '张三',
        },
        {
          value: 'lisi',
          label: '李四',
        },
        {
          value: 'wangwu',
          label: '王五',
        },
      ],
      roles: [
        {
          value: 'manager',
          label: '经理',
        },
        {
          value: 'personnel',
          label: '人事',
        },
        {
          value: 'charge',
          label: '主管',
        },
      ],
    };
  },
  mounted() {
    this.handleModeler();
  },
  methods: {
    handleModeler() {
      // 监听节点选择变化
      this.modeler.on('selection.changed', (e) => {
        const element = e.newSelection[0];
        this.element = element;
        if (!element) return;
        this.form = {
          ...element.businessObject,
          ...element.businessObject.$attrs,
        };
        if (this.form.userType === 'candidateUsers') {
          this.form.candidateUsers = this.form.candidateUsers.split(',') || [];
        }
      });

      //  监听节点属性变化
      this.modeler.on('element.changed', (e) => {
        const { element } = e;
        if (!element) return;
        //  新增节点需要更新回属性面板
        if (element.id === this.form.id) {
          this.form.name = element.businessObject.name;
          this.form = { ...this.form };
        }
      });
    },
    // 属性面板名称，更新回流程节点
    nameChange(name) {
      const modeling = this.modeler.get('modeling');
      modeling.updateLabel(this.element, name);
    },
    // 属性面板颜色，更新回流程节点
    colorChange(color) {
      const modeling = this.modeler.get('modeling');
      modeling.setColor(this.element, {
        fill: null,
        stroke: color,
      });
      modeling.updateProperties(this.element, { color });
    },
    // 任务节点配置人员
    addUser(properties) {
      this.updateProperties(
        Object.assign(properties, {
          userType: Object.keys(properties)[0],
        }),
      );
    },
    // 切换人员类型
    typeChange() {
      const types = ['assignee', 'candidateUsers', 'candidateGroups'];
      types.forEach((type) => {
        delete this.element.businessObject.$attrs[type];
        delete this.form[type];
      });
    },
    // 在这里我们封装一个通用的更新节点属性的方法
    updateProperties(properties) {
      const modeling = this.modeler.get('modeling');
      modeling.updateProperties(this.element, properties);
    },
  },
};
</script>

<style lang="scss" scoped>
.property-panel {
  width: 300px;
  border:1px solid gray;
}
</style>
